<template>
    <div class="category-setting-page">
        <div class="page-header">
            <h1 class="page-title">文章分类管理</h1>
            <p class="page-subtitle">管理文章分类，支持多级分类结构</p>
        </div>

        <div class="category-content">
            <!-- 分类树形结构 -->
            <div class="category-tree">
                <div class="tree-header">
                    <h3>分类列表</h3>
                    <el-button type="primary" @click="showAddDialog('parent')" class="add-parent-btn">
                        <el-icon>
                            <Plus />
                        </el-icon>
                        新增父级分类
                    </el-button>
                </div>
                <div class="category-container">
                    <el-tree :data="categoryTree" :props="treeProps" node-key="id" :expand-on-click-node="true"
                        class="category-tree-content">
                        <template #default="{ node, data }">
                            <div class="tree-node">
                                <div class="node-content">
                                    <el-icon class="node-icon">
                                        <Folder />
                                    </el-icon>
                                    <span class="node-label">{{ data.name }}</span>
                                    <span class="node-alias">({{ data.alias }})</span>
                                </div>
                                <div class="node-actions" @click.stop>
                                    <el-button type="primary" size="small" @click="showAddDialog('child', data)"
                                        v-if="!data.parentId">
                                        添加子分类
                                    </el-button>
                                    <el-button type="primary" size="small" @click="showEditDialog(data)">
                                        编辑分类
                                    </el-button>
                                    <!-- <el-button type="danger" size="small" @click="deleteCategory(data)">
                                    删除
                                </el-button> -->
                                </div>
                            </div>
                        </template>
                    </el-tree>
                    <!-- 搜词器功能 -->
                    <div class="search-word-container">
                        <div class="search-word-header">
                            <h3 class="search-word-title">搜词器</h3>
                            <div class="switch-container">
                                <span class="switch-label">AI模式</span>
                                <el-switch v-model="showEmbeddedChat" />
                            </div>
                        </div>

                        <div v-if="showEmbeddedChat" class="embedded-chat-container">
                            <EmbeddedChat />
                        </div>

                        <template v-else>
                            <!-- 聊天框区域 -->
                            <div class="chat-container">
                                <div v-if="chatMessages.length > 0" class="chat-messages">
                                    <div v-for="(message, index) in chatMessages" :key="index"
                                        :class="['message-item', message.type === 'user' ? 'user-message' : 'ai-message']">
                                        <div class="message-avatar">
                                            <span v-if="message.type === 'user'">👤</span>
                                            <span v-else>🤖</span>
                                        </div>
                                        <div class="message-content">
                                            <div class="message-text">{{ message.content }}</div>
                                            <div class="message-time">{{ message.timestamp }}</div>
                                            <div v-if="message.type === 'ai' && message.keywords?.length > 0"
                                                class="add-to-category-btn" @click="showAddCategoryDialog(message)">
                                                添加到类目
                                            </div>
                                        </div>
                                    </div>
                                    <div v-if="isLoading" class="loading-message">
                                        <div class="message-avatar">🤖</div>
                                        <div class="message-content">
                                            <div class="message-text">AI正在思考中...</div>
                                        </div>
                                    </div>
                                </div>
                                <div v-else class="empty-chat">
                                    <div class="ai-avatar">🤖</div>
                                    <div class="empty-text">请输入关键词开始搜词</div>
                                </div>
                            </div>

                            <!-- 底部输入区域 -->
                            <div class="input-section">
                                <!-- <div class="area-select-container">
                                    <div class="area-label">地区</div>
                                    <el-select v-model="selectedArea" placeholder="请选择地区" class="area-select" filterable>
                                        <el-option v-for="area in countryOptions" :key="area.label" :label="area.label"
                                            :value="area.label" />
                                    </el-select>
                                </div> -->
                                <div class="keyword-input-container">
                                    <!-- <div class="keyword-label">关键词</div> -->
                                    <div class="input-group">
                                        <el-input v-model="keyword" placeholder="请输入内容" class="keyword-input"
                                            @keyup.enter="sendMessage" />
                                        <el-button type="primary" @click="sendMessage" :disabled="!keyword.trim()"
                                            class="send-btn">
                                            发送
                                        </el-button>
                                    </div>
                                    <div class="user-avatar">👤</div>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>

            </div>
        </div>

        <!-- 添加类目对话框 -->
        <el-dialog v-model="addCategoryDialogVisible" title="添加关键词到类目" width="600px" :close-on-click-modal="false">
            <div class="add-category-content">
                <!-- <div class="selected-message">
                    <h4>AI回复的关键词：</h4>
                    <div class="message-preview">{{ selectedMessage?.content }}</div>
                </div> -->
                <div class="category-selection">
                    <h4 style="margin: 0 0 12px;">选择目标分类：</h4>
                    <el-select style="width: 200px;" clearable v-model="targetCategoryId" filterable placeholder="
                        请选择文章分类">
                        <el-option v-for="item in categoryOptions?.filter(item => item.parentId === null)"
                            :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                </div>
                <div class="keyword-selection">
                    <h4>选择要添加的关键词：</h4>
                    <el-checkbox-group v-model="selectedKeywords" class="keyword-checkboxes">
                        <el-checkbox v-for="(keyword, index) in availableKeywords" :key="index" :label="keyword"
                            class="keyword-checkbox">
                            {{ keyword.keyword }} ({{ keyword.keyword_en }})
                        </el-checkbox>
                    </el-checkbox-group>
                </div>
            </div>

            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="cancelAddCategory">取消</el-button>
                    <el-button type="primary" @click="confirmAddCategory" style="background-color: #35b1b1;"
                        :disabled="selectedKeywords.length === 0 || !targetCategoryId">
                        确认添加
                    </el-button>
                </div>
            </template>
        </el-dialog>

        <!-- 新增分类对话框 -->
        <el-dialog v-model="addDialogVisible" :title="dialogTitle" width="500px" :close-on-click-modal="false">
            <el-form :model="categoryForm" ref="categoryFormRef" :rules="categoryRules" label-width="100px">
                <el-form-item label="分类名称" prop="name">
                    <el-input v-model="categoryForm.name" placeholder="请输入分类名称" class="category-input">
                        <template #prefix>
                            <el-icon class="input-icon">
                                <Folder />
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>

                <el-form-item label="分类英文" prop="alias">
                    <el-input v-model="categoryForm.alias" placeholder="请输入分类英文" class="category-input">
                        <template #prefix>
                            <el-icon class="input-icon">
                                <Document />
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>

                <el-form-item v-if="isAddChild || (isEditMode && editCategory?.parentId)" label="父级分类">
                    <el-input v-model="categoryParentName" disabled placeholder="请选择文章分类" />
                </el-form-item>
            </el-form>

            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="cancelAdd">取消</el-button>
                    <el-button type="primary" @click="submitAdd" :loading="submitLoading" class="submit-btn">
                        {{ isEditMode ? '确认修改' : '确认添加' }}
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
import { ref, reactive, onMounted, computed } from 'vue'
import { Plus, Folder, Document } from '@element-plus/icons-vue'
import service from '../config'
import { countryOptions } from '../tool'
import axios from 'axios'
import EmbeddedChat from '../components/chat/EmbeddedChat.vue'
// 页面标题
document.title = '文章分类管理'

// 响应式数据
const addDialogVisible = ref(false)
const submitLoading = ref(false)
const isAddChild = ref(false)
const isEditMode = ref(false)
const editCategory = ref<any>(null)
const categoryFormRef = ref<FormInstance>()
const categoryParentName = ref('')

// 搜词器相关数据
const keyword = ref('')
const selectedArea = ref('')
const chatMessages = ref<Array<{ type: 'user' | 'ai', content: string, timestamp: string, keywords?: any[] }>>([])
const isLoading = ref(false)
const showEmbeddedChat = ref(false)

// 添加类目相关数据
const addCategoryDialogVisible = ref(false)
const selectedMessage = ref<any>(null)
const availableKeywords = ref<any[]>([])
const selectedKeywords = ref<any[]>([])
const targetCategoryId = ref<any>(null)
const categoryOptions = ref([])

// 分类树数据
const categoryTree = ref([])
const treeProps = {
    children: 'children',
    label: 'name',
    value: 'id'
}

// 表单数据
const categoryForm = ref({
    name: '',
    alias: '',
    parentId: null
})

// 表单验证规则
const categoryRules = reactive<FormRules>({
    name: [
        { required: true, message: '请输入分类名称', trigger: 'blur' },
    ],
    alias: [
        { required: true, message: '请输入分类别名', trigger: 'blur' },
    ]
})

// 计算属性
const dialogTitle = computed(() => {
    if (isEditMode.value) {
        return '编辑分类'
    }
    return isAddChild.value ? '新增子分类' : '新增父级分类'
})

// 方法
const showAddDialog = (type: 'parent' | 'child', parentData?: any) => {
    isEditMode.value = false
    isAddChild.value = type === 'child'
    editCategory.value = null
    addDialogVisible.value = true
    categoryParentName.value = categoryOptions.value.find(item => item.id === parentData?.id)?.name
    categoryForm.value = {
        name: '',
        alias: '',
        parentId: isAddChild.value ? parentData?.id : null
    }
}

const showEditDialog = (categoryData: any) => {
    isEditMode.value = true
    isAddChild.value = false
    editCategory.value = categoryData
    addDialogVisible.value = true
    categoryParentName.value = categoryOptions.value.find(item => item.id === categoryData.parentId)?.name
    // 填充表单数据
    categoryForm.value = {
        name: categoryData.name,
        alias: categoryData.alias,
        parentId: categoryData.parentId || null
    }
}



const cancelAdd = () => {
    addDialogVisible.value = false
    categoryForm.value = {
        name: '',
        alias: '',
        parentId: null
    }
    editCategory.value = null
    isEditMode.value = false
}

const submitAdd = async () => {
    if (!categoryFormRef.value) return

    await categoryFormRef.value.validate(async (valid) => {
        if (valid) {
            submitLoading.value = true
            try {
                let requestData: any = {
                    name: categoryForm.value.name,
                    alias: categoryForm.value.alias,
                    parentId: isAddChild.value ? categoryForm.value.parentId : null
                }
                // 如果是编辑模式，添加id字段
                if (isEditMode.value && editCategory.value) {
                    requestData.id = editCategory.value.id
                }
                console.log('提交分类数据:', requestData)

                let response
                if (isEditMode.value) {
                    // 编辑分类
                    response = await service.post('/article/updateCategory', requestData)
                    ElMessage.success('分类更新成功')
                } else {
                    // 新增分类
                    response = await service.post('/article/addCategory', [requestData])
                    ElMessage.success(isAddChild.value ? '子分类添加成功' : '父级分类添加成功')
                }
                addDialogVisible.value = false
                // 重新加载分类树
                await loadCategoryTree()

            } catch (error: any) {
                console.error('操作分类错误:', error)
                const action = isEditMode.value ? '更新' : '添加'
                ElMessage.error(error?.message || `分类${action}失败，请稍后重试`)
            } finally {
                submitLoading.value = false
            }
        }
    })
}


const buildTree = (nodes, parentId = null) => {
    return nodes
        .filter(node => node.parentId === parentId)
        .map(node => {
            const children = buildTree(nodes, node.id);
            return {
                ...node,
                ...(children.length > 0 ? { children } : {})
            };
        });
}

const loadCategoryTree = async () => {
    try {
        service.get('/article/allCategory')
            .then(response => {
                const treeData = response.data?.map(item => ({
                    name: item.name,
                    id: item.id,
                    parentId: item.parentId,
                    alias: item.alias
                }));

                categoryOptions.value = response.data
                categoryTree.value = buildTree(treeData);
                console.log(categoryTree.value);

            })
            .catch(error => {
                console.error('Error fetching data:', error);
            });
    } catch (error: any) {
        ElMessage.error('加载分类数据失败')
    }
}

// 搜词器相关方法
const sendMessage = async () => {
    if (!keyword.value.trim()) {
        ElMessage.warning('请输入搜词内容')
        return
    }

    // if (!selectedArea.value) {
    //     ElMessage.warning('请选择地区')
    //     return
    // }

    // 添加用户消息到聊天框
    const userMessage = `搜词内容：${keyword.value}`
    chatMessages.value.push({
        type: 'user',
        content: userMessage,
        timestamp: new Date().toLocaleTimeString()
    })

    // 清空输入框
    const currentKeyword = keyword.value
    // const currentArea = selectedArea.value
    keyword.value = ''

    isLoading.value = true

    try {
        // 调用后端API
        const webhookUrl = import.meta.env.PROD
            ? 'https://pixeljet-n8n.com/webhook/categorytranslate'
            : '/wkfapi/webhook/categorytranslate'
        const response = await axios.post(webhookUrl, {
            content: currentKeyword
        })

        // 处理API返回的数据
        let aiContent = ''
        let keywordsData: any[] = []
        if (response.data && response.data.output) {
            // 保存原始关键词数据
            keywordsData = response.data.output
            // 将关键词数据格式化为可读的文本
            aiContent = response.data.output.map(item =>
                `${item.keyword} (${item.keyword_en})`
            ).join('\n')
        } else if (response.data) {
            aiContent = response.data
        }

        // 添加AI回复消息
        chatMessages.value.push({
            type: 'ai',
            content: aiContent,
            timestamp: new Date().toLocaleTimeString(),
            keywords: keywordsData
        })

    } catch (error: any) {
        chatMessages.value.push({
            type: 'ai',
            content: '搜词失败，请稍后重试',
            timestamp: new Date().toLocaleTimeString(),
            keywords: []
        })
    } finally {
        isLoading.value = false
    }
}


// 显示添加类目对话框
const showAddCategoryDialog = (message: any) => {
    selectedMessage.value = message
    availableKeywords.value = message.keywords || []
    selectedKeywords.value = []
    targetCategoryId.value = null
    addCategoryDialogVisible.value = true

    // 如果没有关键词数据，显示提示
    if (!message.keywords || message.keywords.length === 0) {
        ElMessage.warning('该消息没有可添加的关键词')
        return
    }
}

// 取消添加类目
const cancelAddCategory = () => {
    addCategoryDialogVisible.value = false
    selectedMessage.value = null
    availableKeywords.value = []
    selectedKeywords.value = []
    targetCategoryId.value = null
}

// 确认添加类目
const confirmAddCategory = async () => {
    if (selectedKeywords.value.length === 0) {
        ElMessage.warning('请选择要添加的关键词')
        return
    }

    if (!targetCategoryId.value) {
        ElMessage.warning('请选择目标分类')
        return
    }
    try {
        // 这里调用后端API添加关键词到分类
        const keywordsToAdd = selectedKeywords.value.map(keyword => ({
            name: keyword.keyword,
            alias: keyword.keyword_en,
            parentId: targetCategoryId.value
        }))
        await service.post('/article/addCategory', keywordsToAdd).then(async (response) => {
            ElMessage.success(`成功添加 ${selectedKeywords.value.length} 个关键词到分类`)
            await cancelAddCategory()
            //获取类目
            await loadCategoryTree()
        }).catch(error => {
            ElMessage.error('添加失败，请稍后重试')
        })
    } catch (error: any) {

        ElMessage.error('添加失败，请稍后重试')
    }
}

// 生命周期
onMounted(() => {
    loadCategoryTree()
})
</script>

<style lang="scss" scoped>
.category-setting-page {
    padding: 24px;
    background: #f5f5f5;
}

.page-header {
    margin-bottom: 24px;

    .page-title {
        font-size: 24px;
        font-weight: 700;
        color: #2c3e50;
        margin: 0 0 8px 0;
        background: linear-gradient(135deg, #35b1b1, #2a8a8a);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .page-subtitle {
        color: #7f8c8d;
        font-size: 14px;
        margin: 0;
    }
}

.category-content {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.category-tree {
    .tree-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 24px;
        border-bottom: 1px solid #f0f0f0;
        background: #fafafa;

        h3 {
            margin: 0;
            font-size: 18px;
            font-weight: 600;
            color: #2c3e50;
        }

        .add-parent-btn {
            background: linear-gradient(135deg, #35b1b1 0%, #2a8a8a 100%);
            border: none;
            box-shadow: 0 4px 15px rgba(53, 177, 177, 0.3);

            &:hover {
                background: linear-gradient(135deg, #3bc4c4 0%, #319494 100%);
                box-shadow: 0 8px 25px rgba(53, 177, 177, 0.4);
                transform: translateY(-2px);
            }
        }
    }

    .category-container {
        height: 100%;
        display: flex;
        gap: 20px;
    }

    .category-tree-content {
        flex: 1;
        min-width: 400px;
        padding: 20px 24px;
        height: calc(100vh - 300px);
        overflow-y: auto;

        .tree-node {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            padding: 8px 0;

            .node-content {
                display: flex;
                align-items: center;
                flex: 1;

                .node-icon {
                    color: #35b1b1;
                    margin-right: 8px;
                    font-size: 16px;
                }

                .node-label {
                    font-weight: 500;
                    color: #2c3e50;
                    margin-right: 8px;
                }

                .node-alias {
                    color: #7f8c8d;
                    font-size: 12px;
                    background: #f0f0f0;
                    padding: 2px 6px;
                    border-radius: 4px;
                }
            }

            .node-actions {
                display: flex;
                gap: 8px;
                opacity: 0;
                transition: opacity 0.3s ease;
            }

            &:hover .node-actions {
                opacity: 1;
            }
        }
    }
}

// 搜词器样式
.search-word-container {
    flex: 1;
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    min-width: 400px;
    height: calc(100vh - 300px);

    .search-word-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;

        .search-word-title {
            text-align: center;
            margin: 0;
            font-size: 20px;
            font-weight: 600;
            color: #2c3e50;
        }

        .switch-container {
            display: flex;
            align-items: center;
            gap: 8px;

            .switch-label {
                font-size: 14px;
                color: #666;
            }
        }
    }

    .embedded-chat-container {
        flex: 1;
        overflow: visible;
        min-height: 0;
    }

    .chat-container {
        flex: 1;
        background: #f8f9fa;
        border-radius: 8px;
        padding: 16px;
        position: relative;
        display: flex;
        flex-direction: column;
        margin-bottom: 20px;
        overflow-y: auto;

        .chat-messages {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-bottom: 20px;

            .message-item {
                display: flex;
                align-items: flex-start;
                gap: 8px;

                &.user-message {
                    flex-direction: row-reverse;

                    .message-content {
                        background: #35b1b1;
                        color: #fff;
                        border-radius: 12px 12px 4px 12px;
                    }
                }

                &.ai-message {
                    .message-content {
                        background: #fff;
                        color: #333;
                        border-radius: 12px 12px 12px 4px;
                    }
                }

                .message-avatar {
                    width: 32px;
                    height: 32px;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 16px;
                    flex-shrink: 0;

                    .user-message & {
                        background: #f0f0f0;
                    }

                    .ai-message & {
                        background: #e3f2fd;
                    }
                }

                .message-content {
                    max-width: 70%;
                    padding: 8px 12px;
                    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
                    position: relative;

                    .message-text {
                        font-size: 14px;
                        line-height: 1.4;
                        margin-bottom: 4px;
                        white-space: pre-line;
                    }

                    .message-time {
                        font-size: 11px;
                        opacity: 0.7;
                    }

                    .add-to-category-btn {
                        position: absolute;
                        bottom: 8px;
                        right: 8px;
                        background: #35b1b1;
                        color: #fff;
                        padding: 4px 8px;
                        border-radius: 4px;
                        font-size: 11px;
                        cursor: pointer;
                        opacity: 1;
                        transition: background-color 0.3s ease;
                        z-index: 10;

                        &:hover {
                            background: #2a8a8a;
                        }
                    }
                }

            }

            .loading-message {
                display: flex;
                align-items: flex-start;
                gap: 8px;
                animation: pulse 1.5s ease-in-out infinite;

                .message-avatar {
                    width: 32px;
                    height: 32px;
                    background: #e3f2fd;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 16px;
                    flex-shrink: 0;
                }

                .message-content {
                    background: #fff;
                    color: #666;
                    border-radius: 12px 12px 12px 4px;
                    padding: 8px 12px;
                    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
                    font-style: italic;
                }
            }
        }

        .empty-chat {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            color: #999;

            .ai-avatar {
                width: 48px;
                height: 48px;
                background: #e3f2fd;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 24px;
                margin-bottom: 16px;
            }

            .empty-text {
                font-size: 16px;
                color: #666;
            }
        }

    }

    .input-section {
        display: flex;
        gap: 16px;
        align-items: end;
        flex-shrink: 0;

        .area-select-container {
            display: flex;
            align-items: end;
            gap: 10px;

            .area-label {
                font-weight: 500;
                color: #333;
                margin-bottom: 8px;
                font-size: 14px;
            }

            .area-select {
                width: 150px;
            }
        }

        .keyword-input-container {
            flex: 1;
            display: flex;
            align-items: end;
            gap: 10px;

            .keyword-label {
                font-weight: 500;
                color: #333;
                margin-bottom: 8px;
                font-size: 14px;
                white-space: nowrap;
            }

            .input-group {
                flex: 1;
                display: flex;
                gap: 8px;
                align-items: center;

                .keyword-input {
                    flex: 1;
                }

                .send-btn {
                    background: #35b1b1;
                    border-color: #35b1b1;
                    height: 32px;
                    padding: 0 16px;
                    font-size: 14px;
                    white-space: nowrap;

                    &:hover:not(:disabled) {
                        background: #2a8a8a;
                        border-color: #2a8a8a;
                    }

                    &:disabled {
                        background: #d9d9d9;
                        border-color: #d9d9d9;
                        color: #999;
                        cursor: not-allowed;
                    }
                }
            }

            .user-avatar {
                width: 32px;
                height: 32px;
                background: #f0f0f0;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 16px;
                color: #666;
                flex-shrink: 0;
            }
        }
    }
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

// 添加类目对话框样式
.add-category-content {
    .selected-message {
        margin-bottom: 20px;
        padding: 12px;
        background: #f8f9fa;
        border-radius: 6px;
        border-left: 4px solid #35b1b1;

        h4 {
            margin: 0 0 8px 0;
            color: #2c3e50;
            font-size: 14px;
        }

        .message-preview {
            color: #666;
            font-size: 13px;
            white-space: pre-line;
            line-height: 1.4;
        }
    }

    .keyword-selection {
        margin: 20px 0;

        h4 {
            margin: 0 0 12px 0;
            color: #2c3e50;
            font-size: 14px;
        }

        .keyword-checkboxes {
            max-height: 300px;
            overflow-y: auto;
            border: 1px solid #e1e8ed;
            border-radius: 6px;
            padding: 12px;

            .keyword-checkbox {
                display: block;
                margin-bottom: 8px;
                font-size: 13px;

                &:last-child {
                    margin-bottom: 0;
                }
            }
        }
    }

    .dialog-footer {
        .el-button--primary {
            background: #35b1b1;
            border-color: #35b1b1;

            &:hover {
                background: #2a8a8a;
                border-color: #2a8a8a;
            }
        }
    }
}

// 添加类目对话框中的复选框主题色
:deep(.add-category-content) {
    .el-checkbox {
        .el-checkbox__input.is-checked .el-checkbox__inner {
            background-color: #35b1b1;
            border-color: #35b1b1;
        }

        .el-checkbox__input.is-checked+.el-checkbox__label {
            color: #35b1b1;
        }

        .el-checkbox__inner:hover {
            border-color: #35b1b1;
        }
    }
}


// 自定义输入框样式
:deep(.category-input) {
    .el-input__wrapper {
        border-radius: 8px;
        background: #f8f9fa;
        border: 2px solid #e1e8ed;
        box-shadow: none;
        transition: all 0.3s ease;
        height: 40px;

        &:hover {
            border-color: #35b1b1;
            background: #fff;
        }

        &.is-focus {
            border-color: #35b1b1;
            background: #fff;
            box-shadow: 0 0 0 3px rgba(53, 177, 177, 0.1);
        }
    }

    .input-icon {
        color: #35b1b1;
        font-size: 16px;
    }
}

// 提交按钮样式
.submit-btn {
    background: linear-gradient(135deg, #35b1b1 0%, #2a8a8a 100%) !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(53, 177, 177, 0.3) !important;

    &:hover {
        background: linear-gradient(135deg, #3bc4c4 0%, #319494 100%) !important;
        box-shadow: 0 8px 25px rgba(53, 177, 177, 0.4) !important;
        transform: translateY(-2px);
    }

    &:active {
        transform: translateY(0);
    }
}

// 响应式设计
@media (max-width: 768px) {
    .category-setting-page {
        padding: 16px;
    }

    .tree-header {
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
    }

    .node-actions {
        opacity: 1 !important;
    }
}
</style>
